<template>
  <div class="base-info-view">
    <el-form
      class="form-detail"
      label-position="right"
      label-width="120px"
      style="padding-left:20px;"
    >
      <el-row
        :gutter="20"
        style="width:100%"
      >
        <el-form-item
          label="配送商名称："
          style="width: 100%"
        >
          <div>{{ detail.distributeName }}</div>
        </el-form-item>
        <el-form-item
          label="配送产品信息："
          style="width: 100%"
        >
          <div>
            <el-link
              type="primary"
              :underline="false"
              @click="toProductDetail"
            >{{ detail.productPopularName }}-{{ detail.approvalNumber }}-{{ detail.packSpecs }}</el-link>
          </div>
        </el-form-item>
        <el-form-item
          label="配送地区："
          style="width: 50%"
        >
          <area-list-view :areas="detail.region" />
        </el-form-item>
        <el-form-item
          label="配送费："
          style="width: 50%"
        >
          <div style="display:flex;">
            <div>
              <div v-if="detail.computeMode==='固定价格'">
                <span>{{ detail.distributePrice }}元</span>
                <span v-if="detail.sellUnit">/{{ getLabel('sell_unit',detail.sellUnit) }}</span>
              </div>
              <div v-if="detail.computeMode==='终端价百分比'">
                <span>{{ detail.distributePrice }}%</span>
                <span>终端价</span>
              </div>
            </div>
            <div
              v-if="detail.disStatus==='2'"
              class="change-price-btn"
              style="margin-left:10px"
            >
              <el-button
                v-if="detail.disStatus === '2'&&!(detail.processDefinitionKey==='setDistributeServeUpdatePriceCheck'&&detail.flowStatus==='DOING')"
                type="text"
                @click="changePrice"
              >
                <template #default>
                  <div>
                    <i class="iconfont icon-bianji" />
                  </div>
                </template>
              </el-button>
            </div>
            <div
              v-if="detail.processDefinitionKey==='setDistributeServeUpdatePriceCheck'"
              class="distribute-price-status"
            >
              <div
                v-if="detail.flowStatus==='DOING'"
                class="status flow-status-color"
              >
                [ 变更审核中 ]
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item
          label="关联配送合同："
          style="width: 50%"
        >
          <div>
            <el-link
              v-if="detail.contractNumber"
              type="primary"
              :underline="false"
              @click="toContractDetail"
            >{{ detail.contractNumber }}</el-link>
            <span v-else>无</span>
          </div>
        </el-form-item>
        <el-form-item
          label="服务结束日期："
          style="width: 50%"
        >
          <div v-if="detail.expireTime">{{ dateFormat('yyyy-mm-dd', detail.expireTime) }}</div>
          <div v-else>无</div>
        </el-form-item>
        <el-form-item
          label="配送时效约定："
          style="width: 50%"
        >
          <div>{{ detail.remark||'无' }}</div>
        </el-form-item>
        <el-form-item
          label="摘要信息："
          style="width: 50%"
        >
          <div>{{ detail.distributeAbstract || '无' }}</div>
        </el-form-item>
      </el-row>
    </el-form>
    <!-- 产品详情 -->
    <detail-drawer
      ref="proDetailDrawer"
      custom-title
    >
      <template #title>
        <span>产品详情 {{ detail.productPopularName }}-{{ detail.approvalNumber }}-{{ detail.packSpecs }}</span>
      </template>
      <template #contents>
        <div class="drawer-content">
          <div class="history-list">
            <item-title title="基本信息" />
            <product-base-info
              v-if="productId"
              :id="productId"
            />
          </div>
          <div class="history-list">
            <item-title title="操作记录" />
            <operation-view
              v-if="productId"
              :id="productId"
              mode="product"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
    <!--合同详情-->
    <detail-drawer
      ref="contractDrawer"
      custom-title
    >
      <template #title>
        <span>合同 {{ detail?.contractName }} </span>
      </template>
      <template #contents>
        <div
          v-if="contractId"
          class="drawer-content"
        >
          <div class="history-list">
            <contract-detail
              ref="salesDetailDrawer"
              :contract-id="contractId"
            />
          </div>
        </div>
      </template>
    </detail-drawer>
  </div>
</template>

<script>
import {defineAsyncComponent, inject, reactive, toRefs, watch} from 'vue'

export default {
  name: 'DeliveryServiceBaseInfo',
  components: {
    productBaseInfo: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/detailComponents/product/productBaseInfo.vue'
      )
    ),
    contractDetail: defineAsyncComponent(() =>
      import('@CRM/views/commonView/contract/contractDetail.vue')
    ),
  },
  props: {
    deliveryServiceId: {
      type: Number,
      default: 0,
    },
    refresh: {
      type: Boolean,
      default: false,
    },
  },
  setup(props, context) {
    const api = inject('api')
    var reactiveData = reactive({
      proDetailDrawer: null,
      contractDrawer: null,
      productId: 0,
      contractId: 0,
      detail: {},
    })
    const getDetail = (id) => {
      api.distributors.DISTRIBUTORS_SERVICE_DETAIL({ id: id }).then((res) => {
        if (res.code === 0) {
          reactiveData.detail = res.data.DistributeServe
        }
      })
    }
    const toContractDetail = () => {
      reactiveData.contractId = reactiveData.detail.contractId
      reactiveData.contractDrawer.open()
    }
    const toProductDetail = () => {
      reactiveData.productId = reactiveData.detail.productId
      reactiveData.proDetailDrawer.open()
    }
    const changePrice = () => {
      context.emit('change-price', reactiveData.detail)
    }
    watch(
      () => props.deliveryServiceId,
      (newval, oldval) => {
        getDetail(newval)
      },
      { immediate: true }
    )
    watch(
      () => props.refresh,
      (newval, oldval) => {
        if (newval) {
          getDetail(props.deliveryServiceId)
          context.emit('update:refresh', false)
        }
      },
      { immediate: false }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      toContractDetail,
      toProductDetail,
      changePrice
    }
  },
}
</script>

<style scoped>
</style>
